﻿<form role="form" id="roster-editor" name="groupForm" unsaved-warning-form  ng-show="activeGroup">
    <div class="form-holder">
        <div class="breadcrumbs-container">
            <div data-item-breadcrumbs data-crumbs="activeGroup.breadcrumbs"></div>
        </div>
        
        <div class="form-group">
                <label for="edit-group-title-highlight" class="wb-label">{{'GroupTitle' | i18next}}</label><br>
                <div class="pseudo-form-control">
                    <div id="edit-group-title-highlight"
                         ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="activeGroup.title"></div>
                </div>
        </div>
        
        <div class="row">
            <div class="form-group input-variable-name col-xs-12 pull-right">
                <label for="edit-group-variableName" class="wb-label">{{'SectionVariableName' | i18next}} <help key="variableName" placement="left" /></label><br>
                <input id="edit-group-variableName" type="text" class="wb-input bg-white width-auto" ng-model="activeGroup.variableName" maxlength="32" spellcheck="false">
            </div>
        </div>

        <div class="form-group" ng-show="!activeGroup.isCoverPage && !((showEnablingConditions===undefined && activeGroup.enablementCondition) || showEnablingConditions)">
            <button type="button" class="btn btn-lg btn-link" ng-click="showEnablingConditions=true" ng-i18next="AddEnablingCondition"></button>
        </div>

        <div class="row" ng-show="!activeGroup.isCoverPage && ((showEnablingConditions===undefined && activeGroup.enablementCondition) || showEnablingConditions)">
          <div class="form-group col-xs-11" >
           <div class="enabling-group-marker" ng-class="{'hide-if-disabled': activeGroup.hideIfDisabled}"></div>
            <label for="edit-group-condition">{{'EnablingCondition' | i18next}} <help key="conditionExpression"/></label>
                
                <input type="checkbox" class="wb-checkbox" disabled="disabled" checked="checked" ng-if="questionnaire.hideIfDisabled"
                   title="{{ 'HideIfDisabledNested' | i18next }}" />
                <input ng-if="!questionnaire.hideIfDisabled" id="cb-hideIfDisabled" type="checkbox" class="wb-checkbox" ng-model="activeGroup.hideIfDisabled" />
                <label for="cb-hideIfDisabled"><span title="{{questionnaire.hideIfDisabled ? ('HideIfDisabledNested' | i18next) : ''}}"></span>{{'HideIfDisabled' | i18next}} <help key="hideIfDisabled" /></label>
            <br>
            <div class="pseudo-form-control">
                <div id="edit-group-condition" ui-ace="{ onLoad : aceLoaded , require: ['ace/ext/language_tools']}" ng-model="activeGroup.enablementCondition"></div>
            </div>
            </div>
            <div class="form-group col-xs-1">
                <button type="button" class="btn cross instructions-cross"
                        ng-click="showEnablingConditions=false;activeGroup.enablementCondition='';activeGroup.hideIfDisabled=false;groupForm.$setDirty();"></button>
            </div>
        </div>       
        
    </div>
<div class="form-buttons-holder">
    <div class="pull-left">
        <button type="submit" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" 
                id="edit-chapter-save-button" class="btn btn-lg" ng-class="{ 'btn-primary': groupForm.$dirty }" 
                ng-click="saveGroup()" unsaved-warning-clear ng-disabled="!groupForm.$valid" ng-i18next="Save"></button>
        <button type="reset" id="edit-chapter-cancel-button" class="btn btn-lg btn-link" ng-click="cancelGroup()" unsaved-warning-clear ng-i18next="Cancel"></button>
    </div>
    <div class="pull-right">
        <button type="button" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" id="add-comment-button" class="btn btn-lg btn-link" ng-click="toggleComments(activeQuestion)" unsaved-warning-clear>
            <span ng-i18next ng-show="!isCommentsBlockVisible && commentsCount == 0">EditorAddComment</span>
            <span ng-show="!isCommentsBlockVisible && commentsCount > 0">{{'EditorShowComments' | i18next: { count: commentsCount } }}</span>
            <span ng-i18next ng-show="isCommentsBlockVisible">EditorHideComment</span>
        </button>
        <button type="button" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-if="!activeGroup.isCoverPage" id="edit-chapter-delete-button" class="btn btn-lg btn-link" ng-click="deleteItem()" unsaved-warning-clear ng-i18next>Delete</button>
        <ng-include src="'moveToChapterSnippet'" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-if="!activeGroup.isChapter && !activeGroup.isCoverPage"/>
    </div>
</div>
</form>
